import React from 'react';
import { Modal, notification } from 'antd';
import ajax from '../../utils/ajax';

//图片的查看详情组件

class ImageView extends React.Component {

  state = {
    imgList: [],  //显示的图片列表
    imageViewVisible: false
  }

  imageView = () => {
    this.setState({ imageViewVisible: true });
    let imgs=this.props.images;
    let imgList;
    if (imgs.length>0) {
          imgList = imgs.map((node) => {
            return (<img src={node} />);
          });
        }
        else{
          imgList="未添加图片";
        }

    this.setState({ imgList: imgList });
  }

  hideModal = () => {
    this.setState({ imageViewVisible: false });
  }

  handleModalOk = () => {
    this.setState({ imageViewVisible: false });
  }

  render() {
    return (
      <div>
        <a href="javascript:void(0)" onClick={this.imageView}>查看图片</a>
        <Modal title="查看图片" visible={this.state.imageViewVisible} onOk={this.handleModalOk}
          onCancel={this.hideModal}>
          {this.state.imgList}
        </Modal>
      </div>
    );
  }
}

export default ImageView;
